<template>
    <el-dialog
        :title="configData.title"
        v-model="configData.open"
        width="1000px"
        :close-on-click-modal="false"
        append-to-body>
        <div class="edit-discount-container">
            <div class="top-container">
                <el-button
                    v-if="!isShow"
                    type="primary"
                    class="one-btn"
                    @click="handleAdd">
                    添加行
                </el-button>
                <el-button
                    v-if="!isShow"
                    :disabled="tableData.currentRows.length==0"
                    type="danger"
                    class="tow-btn"
                    @click="handleDelete(tableData.currentRows)">
                    删除行
                </el-button>
            </div>
            <el-table
                ref="ElTable"
                :data="tableData.list"
                @selection-change="handleSelectionChange"
                border>
                <el-table-column
                    v-if="!isShow"
                    fixed="left"
                    type="selection" width="40" />
                <el-table-column type="index" align="center" label="序号" width="80" />
                <!-- <el-table-column
                    label="折数"
                    align="center"
                    prop="discount">
                    <template #default="scope">
                        <el-select 
                            :disabled="isShow"
                            v-model="scope.row.discount" placeholder="请选择"
                            @change="computedDisUnitPrice(scope.row)">
                            <el-option
                                v-for="dict in bu_discount"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    label="折后单价"
                    align="center"
                    prop="disUnitPrice">
                    <template #default="scope">
                        <el-input 
                            :disabled="true"
                            v-model="scope.row.disUnitPrice" placeholder="请输入" />
                    </template>
                </el-table-column> -->
                <el-table-column
                    label="退款金额"
                    align="center"
                    prop="accountBank"
                    width="150">
                    <template #header>
                        物料名称 <span style="color:red;">*</span>
                    </template>
                    <template #default='scoped'>
                        <el-input
                            v-model="scoped.row.accountBank"
                            placeholder="请输入"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="支付类型"
                    align="center"
                    prop="paymentType"
                    fixed="right"
                    width="120">
                    <template #default='scoped'>
                        <el-select
                            v-model="scoped.row.paymentType"
                            placeholder="请选择"
                            clearable
                        >
                            <el-option
                                v-for="dict in bu_payment"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column 
                    label="申请类型" 
                    align="center" 
                    prop="applyType" width="100">
                    <template #default="scope">
                        {{getDictItemLabel(dataContainer.applyType,scope.row.applyType)}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="最终折扣单价"
                    align="center"
                    prop="finalDisUnitPrice"
                    width="150">
                    <template #default="scope">
                        <el-input 
                            :disabled="isShow"
                            v-model="scope.row.finalDisUnitPrice" 
                            placeholder="请输入"
                            @input="computedSubtotal(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column
                    label="人数"
                    align="center"
                    prop="numberPeople">
                    <template #default="scope">
                        <el-input 
                            :disabled="isShow"
                            v-model="scope.row.numberPeople" 
                            placeholder="请输入"
                            @input="computedSubtotal(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="小计"
                    align="center"
                    prop="subtotal">
                    <template #default="scope">
                        <el-input 
                            :disabled="true"
                            v-model="scope.row.subtotal" placeholder="请输入" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="减免人员"
                    align="center"
                    prop="exemptPeople">
                    <template #default="scope">
                        <el-input 
                            :disabled="isShow"
                            v-model="scope.row.exemptPeople" placeholder="请输入" />
                    </template>
                </el-table-column>
                <el-table-column
                    label="减免理由"
                    align="center"
                    prop="exemptReason">
                    <template #default="scope">
                        <el-select 
                            :disabled="isShow"
                            v-model="scope.row.exemptReason" placeholder="请选择">
                            <el-option
                                v-for="dict in bu_exempt_reason"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column 
                    prop="fileUrl" label="附件"
                    min-width="170">
                    <template #default="scope">
                        <div>
                            {{scope.row.fileUrl_?scope.row.fileUrl_.name:''}}
                            <div style="display:flex;">
                                <el-upload
                                    v-if="!isShow"
                                    ref="upload"
                                    class="upload-demo uploadBtn"
                                    :show-file-list="false"
                                    :headers="headers"
                                    :action="uploadFileUrl"
                                    :on-success="res=>{
                                        onAttaChange(res,scope.row);
                                    }">
                                    <template #trigger>
                                        <el-button
                                            type="text">
                                            上传
                                        </el-button>
                                    </template>
                                </el-upload>
                                <el-button 
                                    type="text"
                                    @click="downloadFile(scope.row.fileUrl_?scope.row.fileUrl_.url:'')">
                                    下载
                                </el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button 
                    type="primary"
                    @click="onSure">
                    确 定
                </el-button>
                <el-button @click="configData.open=false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
/**
 * 编辑折扣明细对话框
 */
import { defineComponent,ref,getCurrentInstance,reactive,nextTick } from "vue";
import { listCustomer } from "@/api/mainData/customerManage";
import { uploadFileUrl as uploadFileUrl_ } from "@/api/global";
import { getToken } from '@/utils/auth';
import { deepCopyObj,getDictItemLabel } from '@/common/OtherTools';
import { numberToFixed } from "@/common/OtherTools";

export default defineComponent({
    name:'EditDiscount',
    props: {
        isShow:{  //是否只是展示
            type:Boolean,
            default:false,
        },
    },
    emits:['onSure'],
    setup(props,{emit}){
        const { proxy:instance } = getCurrentInstance();
        const ElTable = ref(null);  //表格实例
        const isShow = toRef(props,'isShow');
        const configData = reactive({
            open: false,
            title: "折扣明细",
        });
        const tableData = reactive({  //表格数据
            list: [],
            target:{},
            currentRows: [],  //当前多选的数据
        });
        const uploadFileUrl = ref(uploadFileUrl_); // 上传的图片服务器地址
        const headers = ref({ Authorization: 'Bearer ' + getToken() });
        const dictData = instance.useDict("bu_discount",'bu_exempt_reason');
        /** 初始化数据（外部调用） */
        function initData(show=true,data){
            data = data || {};
            tableData.target = data;
            tableData.list = deepCopyObj(data.discountDetailsList || []);
            tableData.list.forEach(item=>{
                if(!item.fileUrl) return;
                item.fileUrl_ = JSON.parse(item.fileUrl);
            });
            configData.open = show;
        }
        /** 多选事件 */
        function handleSelectionChange(rows){
            tableData.currentRows = rows || [];
        }
        /** 确定选择 */
        function onSure(){
            configData.open = false;
            emit('onSure',tableData.list);
        }
        /** 添加一项 */
        function handleAdd(){
            tableData.list.push({});
        }
        /** 删除确定项 */
        function handleDelete(itemList=[]){
            itemList.forEach(item => {
                tableData.list.splice(
                    tableData.list.indexOf(item),
                    1,
                );
            });
        }
        /** 附件选择上传后 */
        function onAttaChange(res,target){
            if(!res) return;
            if(res.code != 200) return;
            target.fileUrl_ = {
                name: res.originalFilename,
                url:res.url,
            };
            target.fileUrl = JSON.stringify(target.fileUrl_);
        }
        /** 下载文件 */
        function downloadFile(url){
            window.open(url);
            // instance.download(url, {}, `course_${new Date().getTime()}.xlsx`);
        }
        /** 计算折后单价 */
        // function computedDisUnitPrice(row){
        //     let value = Number(row.discount) * Number(tableData.target.unitPrice);
        //     row.disUnitPrice = Math.floor(value*100)/100;
        //     row.finalDisUnitPrice = row.disUnitPrice;
        //     computedSubtotal(row);
        // }
        /** 计算小计 */
        function computedSubtotal(row){
            let value = Number(row.finalDisUnitPrice) * Number(row.numberPeople);
            row.subtotal = numberToFixed(value,2);
        }
        return {
            ElTable,handleDelete,handleAdd,
            configData,initData,onSure,isShow,
            tableData,handleSelectionChange,
            uploadFileUrl,headers,onAttaChange,downloadFile,
            // computedDisUnitPrice,
            computedSubtotal,
            getDictItemLabel,
            ...dictData,
        };
    },
});
</script>

<style lang="scss" scoped>
.edit-discount-container{
    width: 100%;
    >.top-container{
        margin-bottom: 15px;
    }
}
</style>
